<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> APP升级包上传 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form ref="form" :model="form" :rules="rules" label-width="90px">
                <div style="display: flex; flex-wrap: wrap">
                    <el-form-item label="版本号：" prop="name" label-width="100px">
                        <el-input placeholder="请输入版本号" v-model="form.name"></el-input>
                    </el-form-item>
                </div>
                <el-form-item label="软件包：" prop="time">
                    <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div class="footer-box">
                <span slot="footer" class="dialog-footer">
                    <el-button @click="close">取 消</el-button>
                    <el-button type="primary" @click="saveEdit">确 定</el-button>
                </span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'CycleSetting',
    data() {
        return {
            form: {
                name: '',
                scheduleDate: [],
                startTime: '',
                endTime: ''
            },
            options1: [
                { value: '周一', label: '周一' },
                { value: '周二', label: '周二' },
                { value: '周三', label: '周三' },
                { value: '周四', label: '周四' },
                { value: '周五', label: '周五' },
                { value: '周六', label: '周六' },
                { value: '周日', label: '周日' }
            ],
            rules: {
                name: [{ required: true, message: '请输入人员姓名', trigger: 'blur' }],
                scheduleDate: [{ required: true, message: '请选择排班日期', trigger: 'change' }],
                startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
                endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }]
            }
        };
    },
    methods: {
        close() {
            this.$refs.form.resetFields();
        },
        saveEdit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.$message({
                        message: '保存成功',
                        type: 'success'
                    });
                } else {
                    return false;
                }
            });
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-end;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.footer-box {
    width: 100%;
    display: flex;
    justify-content: center;
}
</style>
